<template>
  <nut-calendar
    v-model:visible="state.isTimeVisible"
    :default-value="state.date"
    type="range"
    start-date="2020-01-01"
    @close="closeSwitch('isTimeVisible')"
    @choose="setChooseValue"
  >
    <template v-slot:btn>
      <div class="wrapper">
        <div class="d_div">
          <span
            class="d_btn"
            @click="clickBtn"
            >近三天</span
          >
        </div>
        <div class="d_div">
          <span
            class="d_btn"
            @click="clickBtn1"
            >今日</span
          >
        </div>
        <div class="d_div">
          <span
            class="d_btn"
            @click="clickBtn2"
            >本周</span
          >
        </div>
        <div class="d_div">
          <span
            class="d_btn"
            @click="clickBtn3"
            >当月</span
          >
        </div>
      </div>
    </template>
  </nut-calendar>
</template>

<script setup lang="ts">
import { getCurrentWeekRange } from "@/utils/utils";
import { reactive, watch } from "vue";
const { startDate, endDate } = getCurrentWeekRange();
const emit = defineEmits(["update:timeVisible", "update:date"]);
const props = defineProps(["isTimeVisible"]);
const state = reactive({
  dateWeek: "",
  date: [startDate, endDate], //默认当前周区间
  isTimeVisible: false,
  date5: [],
});
watch(
  () => props.isTimeVisible,
  (newVal, oldVal) => {
    state.isTimeVisible = newVal;
    console.log(props.isTimeVisible, "isTimeVisible");
  },
);
watch(
  () => state.isTimeVisible,
  (newVal, oldVal) => {
    emit("update:timeVisible", newVal);
  },
);

const getNumTwoBit = function (n: number): string {
  n = Number(n);
  return (n > 9 ? "" : "0") + n;
};
const date2Str = function (date: Date, split?: string): string {
  split = split || "-";
  const y = date.getFullYear();
  const m = getNumTwoBit(date.getMonth() + 1);
  const d = getNumTwoBit(date.getDate());
  return [y, m, d].join(split);
};
const getDay = function (i: number): string {
  i = i || 0;
  let date = new Date();
  const diff = i * (1000 * 60 * 60 * 24);
  date = new Date(date.getTime() + diff);
  return date2Str(date);
};
const isLeapYear = function (y: number): boolean {
  return (y % 4 == 0 && y % 100 != 0) || y % 400 == 0;
};
const getMonthDays = function (year: string, month: string): number {
  if (/^0/.test(month)) {
    month = month.split("")[1];
  }
  return ([0, 31, isLeapYear(Number(year)) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] as number[])[
    month as any
  ];
};
const openSwitch = param => {
  console.log((state[`${param}`] = true));

  state[`${param}`] = true;
};
const closeSwitch = param => {
  state[`${param}`] = false;
};
const setChooseValue = param => {
  console.log(param, "param");
  state.date = [param[0][3], param[1][3]];
  emit("update:date", state.date);
};
const clickBtn = (param: string) => {
  let date = [date2Str(new Date()), getDay(2)];
  state.date = date;
  emit("update:date", state.date);
};
// 今日
const clickBtn1 = (param: string) => {
  let date = new Date();
  state.date = [date2Str(date), date2Str(date)];
  emit("update:date", state.date);
};
// 本周
const clickBtn2 = (param: string) => {
  state.date = [startDate, endDate];
  emit("update:date", state.date);
};
const clickBtn3 = (param: string) => {
  let date = new Date();
  let year = date.getFullYear();
  let month: any = date.getMonth() + 1;
  month = month < 10 ? "0" + month : month + "";
  let yearMonth = `${year}-${month}`;
  let currMonthDays = getMonthDays(year + "", month + "");
  state.date = [`${yearMonth}-01`, `${yearMonth}-${currMonthDays}`];
  emit("update:date", state.date);
};
</script>

<style lang="less">
.nut-calendar__confirm {
  background: #1e74fd;
}
.wrapper {
  display: flex;
  padding: 0 80rpx;
  justify-content: center;
  justify-content: space-between;
}
.d_div {
  margin: 0 10rpx;
  .d_btn {
    color: #101010;
    padding: 16rpx 16rpx;
    border-radius: 8rpx;
    background: #eef4ff;
    border-radius: 36rpx;
    display: inline-block;
    height: 32rpx;
    font-weight: 600;
    font-size: 28rpx;
  }
}
.history-search-title-date {
  text {
    font-weight: 600;
    font-size: 40rpx;
    color: #101010;
  }
  .title-date {
    margin: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    text {
      font-weight: 400;
      font-size: 28rpx;
      .iconfont {
        padding: 10rpx;
        font-size: 18rpx;
      }
    }
    text:nth-of-type(2) {
      color: #999;
      font-size: 24rpx;
    }
  }
}
</style>
